<template>
  <el-dialog v-model="drawer" title="回款规则" :append-to-body="true" width="300px" @close="close" custom-class="FundRule">
    <el-form size="small" :model="form" :rules="rules" label-width="100px" ref="ruleRefForm">
        <el-form-item label="最小容忍区间" prop="minMoney">
            <el-input-number
                v-model="form.minMoney"
                :min="0"
                size="small"
                controls-position="right"
            />
        </el-form-item>
        <el-form-item label="最大容忍区间" prop="minMoney">
            <el-input-number
                v-model="form.maxMoney"
                :min="0"
                size="small"
                controls-position="right"
            />
        </el-form-item>
        <el-form-item label="容忍差距金额" prop="tolerateMoney">
            <el-input-number
                v-model="form.tolerateMoney"
                :min="0"
                size="small"
                controls-position="right"
            />
        </el-form-item>
    </el-form>
    <template #footer>
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">保存</el-button>
            <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
        </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { computed, toRefs, reactive, ref, watch } from 'vue'
import { useOrderApi } from '/@/api/order/index'
export default {
    name: 'FundRule',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default: () => {
                return {}
            }
        },
        isEdit: {
            type: Boolean,
            default: false
        }
    },
    emits:['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer, isEdit, defaultForm } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    if(isEdit.value) {
                        state.form = JSON.parse(JSON.stringify(defaultForm.value))
                    }
                }
            }
        )
        const ruleRefForm = ref()
        const orderApi = useOrderApi()
        const state = reactive({
            form: {
                minMoney: 0,
                maxMoney: 0,
                tolerateMoney: 0
            },
            rules: {
                minMoney: [{ required: true, message: '请输入最小容忍区间', trigger: 'blur' }],
                maxMoney: [{ required: true, message: '请输入最大容忍区间', trigger: 'blur' }],
                tolerateMoney: [{ required: true, message: '请输入容忍差距金额', trigger: 'blur' }]
            }
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    if(isEdit.value) {
                        orderApi.editMoneyRule(state.form).then(() => {
                            formEl.resetFields()
                            context.emit('onSubmit', true)
                            context.emit('update:dialogDrawer', false)
                        })
                    }else{
                        orderApi.addMoneyRule(state.form).then(() => {
                            formEl.resetFields()
                            context.emit('onSubmit', true)
                            context.emit('update:dialogDrawer', false)
                        })
                    }
                }
            })
        }
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            context.emit('update:dialogDrawer', false)
        }
        return {
            ...toRefs(state),
            drawer,
            close,
            ruleRefForm,
            submitForm,
            cancelForm
        }
    }
}
</script>

<style>

</style>